<template>
  <VDialog @close="handleClose" @save="save" :loading="loading" width="960">
    <template #content>
      <div>
        <el-form
          ref="formRef"
          :model="formValues"
          :rules="rules"
          label-position="top"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="子账号" prop="name">
                <el-input
                  v-model.trim="formValues.name"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账号国家" prop="nation">
                <VSelects
                  v-model="formValues.nation"
                  placeholder="请输入"
                  :dataSourse="options.country"
                  valueField="label"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="币种" prop="currency">
                <VSelectPlus
                  v-model="formValues.currency"
                  placeholder="请选择"
                  url="/exchangeRate/options"
                  valueField="label"
                  clearable
                  filterable
                  class="w-[100%]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="持卡人姓名">
                <el-input
                  v-model.trim="formValues.cardholdersName"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="银行名称">
                <el-input
                  v-model.trim="formValues.bankName"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行代码(路由ABA)">
                <el-input
                  v-model.trim="formValues.bankCode"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="银行国家">
                <VSelects
                  v-model="formValues.bankNation"
                  placeholder="请输入"
                  :dataSourse="options.country"
                  valueField="label"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-switch
                  v-model="formValues.state"
                  :active-value="1"
                  :inactive-value="0"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </template>
  </VDialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { editSubAccount, addSubAccount } from "../api.js";
const props = defineProps({
  data: { type: [String, Number], default: null },
  options: { type: Object, default: () => {} },
});
const { options } = toRefs(props);
const rules = reactive({
  name: [{ required: true, message: "请输入子账号", trigger: "blur" }],
  nation: [{ required: true, message: "请输入账号国家", trigger: "blur" }],
  currency: [{ required: true, message: "请输入币种", trigger: "blur" }],
});
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const formValues = ref({
  id: null,
  name: null,
  nation: null,
  currency: null,
  cardholdersName: null,
  bankName: null,
  bankCode: null,
  bankNation: null,
  accountId: null,
  accountChannelId: null,
  state: 1,
});
const formRef = ref();

watch(
  () => props.data,
  (val) => {
    if (val) {
      for (let key in formValues.value) {
        formValues.value[key] = val[key];
      }
    }
  }
);

const save = async () => {
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        loading.value = true;
        const { code, message } = await (formValues.value?.id
          ? editSubAccount
          : addSubAccount)(formValues.value);
        if (code !== 200) return ElMessage.warning(message)
        ElMessage.success('操作成功');
        handleClose(true);
      } catch (error) {
      } finally {
        loading.value = false;
      }
    }
  });
};
const handleClose = async (refresh) => {
  formValues.value = {
    id: null,
    name: null,
    nation: null,
    currency: null,
    cardholdersName: null,
    bankName: null,
    bankCode: null,
    bankNation: null,
    accountId: null,
    accountChannelId: null,
    state: 1,
  };
  formRef.value.resetFields();
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
